<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<body>
    <div id="cart">
        <table cellspacing="0" border="1px" width="600px" :mouseover="compteTotal()">
            <tr style="background-color:darkgrey;">
                <td width='40px'></td>
                <td>书籍名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item, index) in items">
                <td>{{index}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{'￥'+ item.price.toFixed(2)}}</td>
                <td><button @click="sub(item)" :disabled="item.num===1">-</button>{{item.num}}<button
                        @click="add(item)">+</button></td>
                <td><button @click="deleteItem(index)">移除</button></td>
            </tr>
        </table>
        <br>
        <p style="font-weight: bold; font-size: large;">{{'总价格：￥'+ totalprice.toFixed(2)}}</p>
    </div>
</body>

<script>
    var app = new Vue({
        el: '#cart',
        data: {
            items: [{
                name: "《java编程思想》",
                date: "2020-9",
                price: 98,
                num: 1
            },
            {
                name: "《数据分析与数据原理》",
                date: "2019-2",
                price: 39,
                num: 1
            },
            {
                name: "《Hadoop权威指南》",
                date: "2019-10",
                price: 59,
                num: 1
            },
            {
                name: "《代码大全》",
                date: "2018-8",
                price: 128,
                num: 1
            },
            ],
            totalprice: 0
        },
        methods: {
            add(item) {
                item.num++
                this.compteTotal()
            },
            sub(item) {
                item.num--
                this.compteTotal()
            },
            deleteItem(index) {
                console.log("delete" + index),
                    this.items.splice(index, 1)
                this.compteTotal()
            },

            compteTotal: function () {
                this.totalprice = 0
                for (idx = 0; idx < this.items.length; ++idx) { this.totalprice += this.items[idx].num * this.items[idx].price }
            },
        },
    })
</script>

</html>